<!DOCTYPE html>
<html>
<head>
	<title>Login</title>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="referrer" content="always"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="d.js"></script>
	
	<style type="text/css">
		ul
		  {
		  list-style:none
		  }
 
	</style>
</head>
	<script type="text/javascript">
		$(document).ready(function(){
		
			$("#loginBtn").bind("click",login);
			
			$("#closeBtn").on("click",close);
			
			$("#clearBtn").click(clear);
			
			$("#sendBtn").click(send);
			
		});
		
		//--------------------------------------------------------------------
		  var client = null;
		  
		  var websocket;
		  var counter=0;
		  var timer;
		  //连接服务器
		  function login(){
			let userId=$("#uid").val()
			let token=$("#token").val()
			let deviceId=$("#deviceId").val()
			
			client = new MimoClient("ws://127.0.0.1:18080/ws/connect",userId,token, deviceId,{
				
				onConnecting:function(){
					console.log('connecting');
				   $("#sts").text("connecting");
				   clear();
				},
				onConnected:function(){
					console.log('connected');
					$("#sts").text("connected");
					$("title").text($("#uid").val());
					clear();
					append("  open");
				},
			
				onP2PMessage: function(userId, content){
					$("#counter").text(++counter);
					append(userId+":"+content);
				},
				onRoomMessage:function(roomId,userId,content){
					$("#counter").text(++counter);
					append(roomId+":"+userId+":"+content);
				},
				onComplete:function(evt){
					console.log('disconnected:');
					if(evt){
						console.log(evt);
					}
					$("#sts").text("disconnected");
					append('Disconnected');	
				},
				onErrorMessage:function(code,content){
					alert(code+":"+content);
				},
				
				onMessageExpired:function(msg){
					alert('消息超时');
					console.log(msg);
				},
				
				onJoinRoomSuccess:function(roomId){
					alert('加入房间：'+roomId+" 成功");
				},
				
				onJoinRoomFailed:function(roomId){
					alert('加入房间：'+roomId+" 失败");
				}
			}); 
			
			//登陆动作
			client.connect();
		  }
		  
		 
		  function reset(){
			counter=0;
			$("#counter").text(counter);
		  }
		  
		  function count(){
			console.log("Counter:"+ counter)
		  }
		  
		  //发送指令
		  function send(times){
			let cmd=$("#cmd").val();
			if(!cmd){
				alert('cmd required not null');
			}
			
			append("->"+cmd);
			
			if(times && times>0){
				for(let t=0;t<times;t++){
					client.send(cmd);
				}
			}else{
				client.send(cmd);
			}
			
		  }
	  
 
		  //关闭连接
		  function close(){
			 client.logout();
		  }
		  
		  //消息区追加
		  function append(cmd){
			 $("#msg").append("<li>"+new Date().format("yyyy-MM-dd hh:mm:ss")+": "+cmd+"</li>");
		  }
		  
		  
		  function clear(){
			$('ul li').remove();
			reset();
		  }
		  
		  //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
		  window.onbeforeunload = function(){
			  client.logout();
		  }
       
		
		
		//一个简单的date format器
		Date.prototype.format = function(fmt){
		  let o = {
			"M+" : this.getMonth()+1,                 //月份
			"d+" : this.getDate(),                    //日
			"h+" : this.getHours(),                   //小时
			"m+" : this.getMinutes(),                 //分
			"s+" : this.getSeconds(),                 //秒
			"q+" : Math.floor((this.getMonth()+3)/3), //季度
			"S"  : this.getMilliseconds()             //毫秒
		  };

		  if(/(y+)/.test(fmt)){
			fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
		  }
				
		  for(let k in o){
			if(new RegExp("("+ k +")").test(fmt)){
			  fmt = fmt.replace(
				RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));  
			}       
		  }

		  return fmt;
		}
		
	</script>


    <body>
         <table>
			<tr>
				<!-- left region -->
				<td style="margin-top:0px" valign="top">		
					<fieldset style="margin-top:0px">
						<legend>Login Form <label>-----></label><b><label id="sts">disconnected</label></b></legend>
							<label>User   </label><input type="text" id="uid" value="hongyu" />
							<label>Token  </label><input type="text" id="token" value="8fe4f3092f594b81b9a6be2e0e2ce230" />
							<label>Device  </label><input type="text" id="deviceId" value="ABS001" />
							<button id="loginBtn">Login</button>
							<button id="closeBtn">Close</button>
						 
					</fieldset>
			 
					<fieldset style="margin-top:0px">
						<legend>指令输入</legend>
						<textarea rows='7' cols='100' id="cmd"></textarea>
						<div align="right"><button id="sendBtn">Send</button></div>
					</fieldset>
 
				</td>
				
				<!-- right region -->
				<td style="margin-top:0px">		
					<fieldset >
						  <legend>消息区-><b><label id="counter">0</label></b></legend>
						  <button id="clearBtn">Clear</button>
						  <ul id="msg">
							<li>Coffee</li>
							<li>Milk</li>
							<li>Milk</li>
							<li>Milk</li>
							<li>Milk</li>
							<li>Milk</li>
						  </ul>
					</fieldset>
				</td>
			</tr>
		 </table>
    </body>
	    
</html>